<template>
	<view class="list">
		<view class="item ">
			<view class="item-top">
				<image class="item_img" :src="details.avatar" mode=""></image>
				<view class="tittle">
					<view class="tittle_top">
						<text class="font_18 color_6">{{details.nickname}}</text>

					</view>

					<text class="text_list"> {{details.content}}
					</text>
				</view>

			</view>
			<view class="bottom">
				<view class="font_14 color_9">{{details.create_time_text}}</view>
				<view class="font_14 color_9">
					<image class="icon" src="../../static/img/6/6-7.png" mode="aspectFit" @click="zan"></image>
					{{details.like}}
					<image style="margin-left: 60rpx;" class="icon" src="../../static/img/6/6-8.png" mode="aspectFit" @click="replay"></image>
					{{details.comment}}
				</view>
			</view>
			<text class="dwon"></text>
		</view>
		<view class="item " v-for="(item,index) in commentList" :key="item.id">
			<view class="item-top">
				<image class="item_img" :src="item.avatar" mode=""></image>
				<view class="tittle">
					<view class="tit_top">
						<text class="tit-big color_6">{{item.nickname}}</text>
						<text class="tit-small">{{item.create_time_text}}</text>
					</view>
					<view class="text_list">
						回复<text class="blue">{{item.to_nickname}}</text> :{{item.content}}
					</view>
				</view>

			</view>
		</view>
	</view>


</template>

<script>
	export default {
		name: "list",
		data() {
			return {
				details: [],
				commentList: [],
				savedata:{}
			}
		},
		async onLoad(options) {
			this.savedata = options
			this.loadData(options.id, options.topic_id)
		},
		methods: {
			loadData(id, topic_id) {
				this.$Request.post4(
					this.$api.httpApi.special.commentDetail, {
						comment_id: id
					}
				).then(res => {
					if (res.code == 1) {
						this.details = res.data

					}
				})
				this.$Request.post4(
					this.$api.httpApi.special.comment, {
						topic_id: topic_id,
						comment_id: id,
						limit: 10,
						page: 1
					}
				).then(res => {
					if (res.code == 1) {
						this.commentList = res.data.data

					}
				})

			},
			replay() {

				this.$Request.post(this.$api.httpApi.car.list + "&token=" + this.$SysCache.get('token')).then(res => {
					if (res.code == 200) {
						uni.navigateTo({
							url: `/pages/special/comment?id=${this.details.topic_id}&class_id=${this.details.class_id}&pid=${this.details.id}&to_uid=${this.details.uid}&to_nickname=${this.details.nickname}`
						})
					}
				})

			},
			zan() {
				var that = this
				this.$Request.post(
					this.$api.httpApi.user.userinfo + '&token=' + this.$SysCache.get('token'),
				).then(res => {
					if (res.code == 200) {

						that.$Request.post4(
							that.$api.httpApi.special.commentLike, {
								uid: res.data.id,
								comment_id: that.details.id,
								
							}
						).then(resd => {
							if (resd.code == 1) {
								// that.commentList = resd.data.data
								uni.showModal({
									title:'提示',
									content:resd.msg,
									success:function(resd){
										if(resd.confirm){
											that.loadData(that.savedata.id, that.savedata.topic_id)
										}
										else if (resd.cancel) {
										    that.loadData(that.savedata.id, that.savedata.topic_id)        
										}
									}
								})
								

							}
						})
					}
				});


			}
		}




	}
</script>

<style lang="scss">
	page {
		background: #E9E9E9;
	}

	.item {
		width: 95%;
		margin: 0 auto;
		background: #fff;
		margin-bottom: 20rpx;
		position: relative;

		.item-top {
			padding: 20upx;
		}

		.dwon {
			position: absolute;
			width: 0;
			height: 0;
			border-left: 15upx solid transparent;
			border-right: 15upx solid transparent;
			border-top: 20upx solid #fff;
			left: 50%;
			margin-left: -10upx;
			bottom: -20upx;
		}
	}

	.item_img {
		width: 72rpx;
		height: 72rpx;
		border-radius: 50%;
	}

	.icon {
		width: 34rpx;
		height: 36rpx;
		vertical-align: middle;
		margin-right: 5rpx;
	}

	.tittle {
		width: 55%;
		padding-left: 20rpx;
	}

	.tittle text {
		display: block;
		margin-bottom: 10rpx;
	}

	.img_list image {
		width: 190rpx;
		height: 160rpx;
		margin-right: 20rpx;
	}

	.text_list {
		font-size: 23upx;
		color: #666;
	}

	.img_list image:nth-child(3n) {
		margin-right: 0rpx;
	}

	.item .img_list {
		display: flex;
		width: 100%;
	}

	.item .tittle {
		width: 90%;
	}

	.bottom {
		display: flex;
		justify-content: space-between;
		padding-right: 10upx;
		padding: 20upx 20upx 20upx 90upx;
	}

	.bottom navigator image {
		margin-left: 30rpx;
	}

	.tittle_top {
		display: flex;
		justify-content: space-between;
		padding-right: 20upx;
	}

	.item-top {
		display: flex;
		border-bottom: 1px solid #F2F2F2;
		padding-bottom: 20upx;
	}

	.tit_top {
		display: flex;

		.tit-big {
			font-size: 25upx;
			color: #666;
		}

		.tit-small {
			color: #B5B5B5;
			font-size: 19upx;
			margin-left: 10upx;
		}
	}

	.blue {
		color: #4DC897;
		display: inline-block !important;
	}
</style>
